/**
 * @create 2022-03-30
 * @desc index
 */

import { FC } from 'react';
import { renderRoutes } from 'react-router-config';
import { useCurRoutes } from '@src/pages/main/common/hooks';
import { Breadcrumb } from 'antd';
import { routerConfig } from '../routers';

export const ContentComp: FC = () => {
  const matchCurRoutes = useCurRoutes();

  return (
    <div className="flex flex-col h-full">
      <div className="flex-none h-40 leading-40 px-16">
        <Breadcrumb separator=">" className="inline-block">
          {matchCurRoutes.map((item, index) => {
            const path = item.path as string;

            if (index + 1 === matchCurRoutes.length) {
              return <Breadcrumb.Item key={path}>{item?.meta?.title}</Breadcrumb.Item>;
            }

            return (
              <Breadcrumb.Item key={path} href={path}>
                {item?.meta?.title}
              </Breadcrumb.Item>
            );
          })}
        </Breadcrumb>
      </div>
      <div className="flex-auto px-16 pd-16 overflow-auto">{renderRoutes(routerConfig)}</div>
    </div>
  );
};
